<template>
  <div class="allmv-container">
    <div class="mv-item" v-for="mv in artistMV" :key="mv.id">
      <router-link :to="{ path: '/mv', query: { id: mv.id } }">
        <img v-lazy="mv.imgurl" alt=""
      /></router-link>
      <p class="mv-name">{{ mv.name }}</p>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "AllMV",
};
</script>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getArtistMVApi } from "@/api/artist/artist";

const route = useRoute();
const id = ref<any>(route.query.id);

const artistMV = ref();

const getArtistMV = async (id: number) => {
  const res = await getArtistMVApi(id);
  artistMV.value = res.mvs;
};

onMounted(() => {
  getArtistMV(id.value);
});
</script>

<style scoped>
.allmv-container {
  width: 640px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.mv-item {
  padding: 10px;
}
.mv-item img {
  width: 137px;
  height: 103px;
}
.mv-name {
  width: 137px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
